<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件的定义使用</title>
  </head>
  <body>
    <div id="app">
      <div>
        <my-div></my-div>
        <my-div></my-div>
      </div>
    </div>

    <div id="app2">
      <my-div></my-div>
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script>
    var myVue = Vue.extend({
      //   template: "<h2>这是vue扩展的组件</h2>"
      template: `
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
        </ul>
    `
    })

    // 注册组件
    Vue.component("myDiv", myVue)

    var app = new Vue({
      el: "#app",
      data: {}
    })

    var app2 = new Vue({
      el: "#app2",
      data: {}
    })
  </script>
  <!-- <h5>自定义的标签就是组件,每个标签代表一个组件</h5> -->
  <!-- 注意
    1、任何使用Vue的地方都可以使用组件
    2、组件需要注册后才能使用。注册有全局注册和局部 注册两种方式。
--></html>
